import "./index.scss";
import { useRef, useEffect, useState } from "react";
import { FileProtectOutlined, UploadOutlined } from "@ant-design/icons";
import {
  Button,
  Checkbox,
  Col,
  Form,
  Input,
  Radio,
  Rate,
  Row,
  Select,
  Slider,
  Switch,
  Upload,
} from "antd";

const { TextArea } = Input;

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const normFile = (e: any) => {
  console.log("Upload event:", e);
  if (Array.isArray(e)) {
    return e;
  }
  return e?.fileList;
};

const onFinish = (values: any) => {
  console.log("Received values of form: ", values);
};


const Main = () => {
  useEffect(() => {}, []);

  useEffect(() => {}, []);

  return (
    <div id="pad" className="home">
      <div className="top">
        <div className="top-item">
          <div className="top-item-right">
            <span>设备管理</span>
          </div>
          <div className="top-item-left">
            <FileProtectOutlined style={{ color: "#fff", fontSize: "16px" }} />
          </div>
        </div>
      </div>
      <Form
        name="validate_other"
        {...formItemLayout}
        onFinish={onFinish}
        initialValues={{
          "input-number": 103.965327,
          "checkbox-group": ["A", "B"],
          rate: 3.5,
        }}
        style={{ maxWidth: 600 }}
      >
        <Form.Item label="模拟测试表单">
          <span className="ant-form-text">参数xxxx</span>
        </Form.Item>

        <Form.Item
          name="input"
          label="参数1"
          hasFeedback
          rules={[{ required: true, message: "请输入内容!" }]}
        >
          <Input allowClear style={{ width: "50%" }} defaultValue="A口XXXX地" />
        </Form.Item>
        <Form.Item
          name="input"
          label="参数2"
          hasFeedback
          rules={[{ required: true, message: "请输入内容!" }]}
        >
          <Input
            allowClear
            style={{ width: "50%" }}
            defaultValue="JY19192231"
          />
        </Form.Item>

        <Form.Item label="参数3">
          <Form.Item name="input-number" noStyle>
            <Input allowClear style={{ width: "50%" }} defaultValue="0571" />
          </Form.Item>
          <span className="ant-form-text" style={{ marginLeft: 8 }}>
            <Switch />
          </span>
        </Form.Item>
        <Form.Item label="参数4">
          <Form.Item name="input-number" noStyle>
            <Input allowClear style={{ width: "50%" }} defaultValue="0571" />
          </Form.Item>
          <span className="ant-form-text" style={{ marginLeft: 8 }}>
            <Switch />
          </span>
        </Form.Item>

        <Form.Item name="slider" label="参数6">
          <Slider
            style={{ marginLeft: 20 }}
            marks={{
              0: "无危险",
              20: "超级弱",
              40: "弱",
              60: "一般",
              80: "强",
              100: "极强",
            }}
          />
        </Form.Item>

        <Form.Item name="radio-group" label="参数7">
          <Radio.Group>
            <Radio value="a">是</Radio>
            <Radio value="b">否</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item
          name="input"
          label="参数8"
          hasFeedback
          rules={[{ required: true, message: "请输入内容!" }]}
        >
          <TextArea showCount maxLength={100} style={{ height: 50 }} />
        </Form.Item>

        <Form.Item
          name="upload"
          label="参数9"
          valuePropName="fileList"
          getValueFromEvent={normFile}
          extra="测试111"
        >
          <Upload name="logo" action="/upload.do" listType="picture">
            <Button icon={<UploadOutlined />}>上传</Button>
          </Upload>
        </Form.Item>

        <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};
export default Main;
